{include file="public/header"/}
{load href="/public/static/Content/ThemesBusiness/FormPage.css"}

<div id="tabState" class="easyui-tabs" fit="true">
    <div title="新建">
        <form id="formState" style="width:95%; text-align:center;">
            <table class="form_table" width="860px" style=" margin:0 auto;">

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        商品序列号
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input id="sn" name="tagslogs_sn" class="easyui-validatebox" type="text" style="width:600px;"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        商品名称
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input id="good_name" class="easyui-validatebox" type="text" style="width:600px;"
                            disabled="disabled" data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        维修项目
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input class="easyui-validatebox" type="text" style="width:600px;" name="project"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        维修时间
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input type="text" style="width:600px;" class="easyui-datebox" name="date"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        维修人员
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input class="easyui-validatebox" type="text" style="width:600px;" name="personnel"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        维修费用
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input class="easyui-validatebox" type="text" style="width:600px;" name="price"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        维修说明
                    </th>
                    <td colspan="4" style="width:100%;padding-left:8px; height:150px;border: none"
                        class="form_td form_td_content">
                        <textarea class="easyui-validatebox" name="mark" style="height:150px;width:100%;"
                            data-options="tipPosition:'right'"></textarea>
                    </td>
                </tr>

                <tr class="form_tr" style="margin-top:20px ">
                    <th style="width:80px;" colspan="5" class="form_td form_th_title">
                        客户提交的信息
                    </th>

                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        送检单位
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input class="easyui-validatebox" type="text" style="width:600px;" name="danwei"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        联系人
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input class="easyui-validatebox" type="text" style="width:600px;" name="contacts"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        联系电话
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input class="easyui-validatebox" type="text" style="width:600px;" name="telphone"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>
                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        通知邮箱
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input class="easyui-validatebox" type="text" style="width:600px;" name="email"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <tr class="form_tr">
                    <th style="padding-left:8px;width:80px;" class="form_td form_th_title">
                        故障原因
                    </th>
                    <td style="width:90%;padding-left:8px;" colspan="4" class="form_td form_td_content">
                        <input class="easyui-validatebox" type="text" style="width:600px;" name="cause"
                            data-options="required:true,tipPosition:'right'," />
                    </td>
                </tr>

                <th style="padding-left:8px;" class="form_td form_th_title">
                    上传图片
                </th>
                <td>
                    <div id="form_ProductImg_UploadPanel">
                        <input type="file" id="file_img" accept="image/*" multiple="multiple">
                    </div>
                </td>

                <th style="padding-left:8px;" class="form_td form_th_title">
                    上传视频
                </th>
                <td>
                    <div id="form_ProductImg_UploadPanel">
                        <input type="file" id="file_video" accept="video/*">
                    </div>
                </td>

                <tr class="form_tr">
                    <td class="form_button_panel" colspan="5" style="padding-right:8px">
                        <a id="save" class="easyui-linkbutton form-toolbar-button"
                            data-options="iconCls:'icon-save'">保存</a>
                    </td>
                </tr>
            </table>
            <input type="hidden" name="video" id="video" value="">
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

<script>
    $('#sn').change(function () {
        $.post('/api/mobile/getNameBySn', { sn: $('#sn').val() }, function (res) {
            if (res.status == 1) {
                $('#good_name').val(res.info);
            } else {
                $('#good_name').val('');
            }
        });
    })
</script>

<script>

    function showList(id) {
        var dWidth = $(window).width() * 1;
        var dHeight = $(window).height() * 1;
        if (id <= 0) {
            $.messager.alert('提示', "没有ID", 'info');
            return 0;
        } else {
            window.showBusinessForm("详情", '/admin/fix/details.html?id=' + id, dWidth, dHeight);
        }


    }

    document.getElementById("file_video").addEventListener("change", function (e) {

        let fileVIdeo = document.getElementById("file_video").files[0];
        var url = URL.createObjectURL(fileVIdeo);
        var audioElement = new Audio(url);

        audioElement.addEventListener("loadedmetadata", function (_event) {
            var duration = audioElement.duration;
            if (duration > 31) {
                $.messager.alert('提示', '视频时长不能超过30秒', 'error');
            } else {
                var formData = new FormData();
                formData.append('file', document.getElementById('file_video').files[0]);
                $.ajax({
                    url: '/api/upload/uploads.html?path=video',
                    dataType: 'json',
                    type: 'POST',
                    async: false,
                    data: formData,
                    processData: false, // 使数据不做处理
                    contentType: false, // 不要设置Content-Type请求头
                    success: function (res) {
                        console.log(res.img);
                        if (res.status == 1) {
                            $.messager.alert('提示', res.msg, 'ok');
                            $('#video').val(res.info)
                        } else {
                            $.messager.alert('提示', res.msg, 'error');
                        }

                    },
                    error: function (response) {
                        //$("#logo_img").val('');
                        $.messager.alert('提示', '接口错误', 'error');
                    }
                });
            }
        });
    });

    document.getElementById("file_img").addEventListener("change", function (e) {
        var formData = new FormData();
        for (let index = 0; index < document.getElementById('file_img').files.length; index++) {
            formData.append('file', document.getElementById('file_img').files[index]);
            $.ajax({
                url: '/api/upload/uploads.html?path=img',
                dataType: 'json',
                type: 'POST',
                async: false,
                data: formData,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (res) {
                    console.log(res.img);
                    if (res.status == 1) {
                        // $('#img').val(res.info)
                        $('#formState').append('<input type="hidden" name="img[]" id="img" value="' + res.info + '">');
                    } else {
                        $.messager.alert('提示', res.msg, 'error');
                    }

                },
                error: function (response) {
                    //$("#logo_img").val('');
                    $.messager.alert('提示', '接口错误', 'error');
                }
            });
        }
        $.messager.alert('提示', '上传成功', 'ok');
    });


    $(function () {
        $("#save").on("click", function () {
            $.ajax({
                type: 'POST',
                url: "save.html",
                data: $("#formState").serialize(),
                dataType: "json",
                async: false,
                error: function (request) {
                    alert("发送请求失败！");
                },
                success: function (data) {
                    if (data.status == 1) {
                        alert(data.msg);
                        // location.href="/admin/fix/details.html?id="+data.pid;
                        showList(data.pid);
                        location.reload();
                    } else {
                        // $.messager.alert('提示', data.msg, 'info');
                        // return;
                        alert(data.msg);

                    }

                }
            });
        })
    })


</script>

{include file="public/footer"/}